<template>
  <div>
    <el-row :gutter="1">
      <el-form ref="Classes" :model="classes" :rules="rules" size="medium" label-width="100px"
               label-position="left">
        <el-col :span="17">
          <el-form-item label="内容名称" prop="clName">
            <el-input v-model="classes.clName" placeholder="请输入内容名称" clearable :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="18">
          <el-form-item label="上传视屏" prop="field102" required>
            <el-upload  ref="field102" :file-list="field102fileList" :action="field102Action" :on-success="successUpload"
                       :before-upload="field102BeforeUpload" list-type="picture-card" accept="video/*">
              <i class="el-icon-plus"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="21">
          <el-form-item label="课程简介" prop="clInfo">
            <el-input v-model="classes.clInfo" type="textarea" placeholder="请输入课程简介"
                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="视屏时长" prop="clTime">
            <el-input-number v-model="classes.clTime" placeholder="视屏时长" :step='1'></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="15">
          <el-form-item label="选择课程" prop="cid">
            <el-select v-model="classes.cid" placeholder="请选择选择课程" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in courseList" :key="index" :label="item.cname"
                         :value="item.cid" :disabled="item.disabled"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item size="large">
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
  export default {
    components: {},
    props: [],
    data() {
      return {
        cid:undefined,
        classes: {
        clId:undefined,
        clName:undefined,
        field102: null,
        clInfo: undefined,
        clTime: undefined,
        cId: undefined,
        clUrl:undefined
    },
      rules: {
        clName:[{
        required: true,
        message: '请输入内容名称',
        trigger: 'blur'
      }],
        clInfo: [{
        required: true,
        message: '请输入课程简介',
        trigger: 'blur'
      }],
        clTime: [{
        required: true,
        message: '视屏时长',
        trigger: 'blur'
      }],
        cid: [{
        required: true,
        message: '请选择选择课程',
        trigger: 'change'
      }],
    },
      field102Action: 'http://127.0.0.1:8999/upload/',
        field102fileList: [],
        courseList: [{
        "cname": "",
        "cid": 1
      }],
    }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
      this.selectAllCourse()
      console.log(123)
      if(this.$route.params.classes!=undefined){
        this.classes=this.$route.params.classes;
        console.log(this.$route.params.classes)
      }
    },
    methods: {
      selectAllCourse(){
        this.$axios.get("http://127.0.0.1:8999/course/selectAllCourse").then(res=>{
          this.courseList=res.data.data
        })
      },
      successUpload(res){
        this.classes.clUrl=res.message
      },

      submitForm() {
        console.log(this.classes)
        //var qs = require('qs')
        this.$axios.post("http://127.0.0.1:8999/classes/savaClasses",this.classes).then(res=>{
          if(res.data.code==200){
            this.$message.success('上传视屏整体操作成功')
            this.classes=null
            this.cid=null
            this.$router.push({path:"/classesList"})
          }else{
            this.$message.error('上传视屏整体操作失败')
          }
        })
      },
      resetForm() {
        this.$refs['classes'].resetFields()
      },
      field102BeforeUpload(file) {
        let isRightSize = file.size / 1024 / 1024 < 1024
        if (!isRightSize) {
          this.$message.error('文件大小超过 1024MB')
        }
        let isAccept = new RegExp('video/*').test(file.type)
        if (!isAccept) {
          this.$message.error('应该选择video/*类型的文件')
        }
        return isRightSize && isAccept
      },
    }
  }

</script>
<style>
  .el-upload__tip {
    line-height: 1.2;
  }

</style>
